<template>
  <view class="power-calculation">
    <view class="header">
      <view class="title">
        <view class="line"></view>
        <view class="text">计算原灯功率</view>
      </view>
      <view class="add-btn" @click="addItem">新增</view>
    </view>
    <view class="form-items">
      <view v-for="(item, index) in powerList" :key="index" class="form-item">
        <view class="item-label">灯具功率 (W)</view>
        <view class="item-content">
          <input type="number" v-model="item.power" placeholder="功率" />
        </view>
        <view class="item-label">灯具数量</view>
        <view class="item-content">
          <input type="number" v-model="item.quantity" placeholder="数量" />
        </view>
        <view class="remove-btn" @click="removeItem(index)">x</view>
      </view>
      <view class="result">
        <view class="item-label">平均功率 (W):</view>
        <view class="item-content">{{ averagePower }}</view>
      </view>
    </view>
    <view class="submit-btn" @click="calculateAveragePower">计算平均功率</view>
  </view>
</template>

<script>
export default {
	props: {
	  projectInfo: {
	    type: Object
	  }
	},
  data() {
    return {
      powerList: [{ power: '', quantity: '' }],
      averagePower: 0
    }
  },
  watch: {
      projectInfo: {
        handler(newVal) {
          console.log('projectInfo:', newVal);
        },
        deep: true,
        immediate: true
      }
    },
  methods: {
    addItem() {
      this.powerList.push({ power: '', quantity: '' });
    },
    removeItem(index) {
      this.powerList.splice(index, 1);
    },
    calculateAveragePower() {
      let totalPower = 0;
      let totalQuantity = 0;
      this.powerList.forEach(item => {
        if (item.power && item.quantity) {
          totalPower += item.power * item.quantity;
          totalQuantity += parseInt(item.quantity);
        }
      });
      if (totalQuantity > 0) {
        this.averagePower = (totalPower / totalQuantity).toFixed(2);
        this.sendAveragePower(this.averagePower); // 发送平均功率
      } else {
        this.averagePower = 0;
        uni.showToast({
          title: '请输入有效的灯具功率和数量',
          icon: 'none'
        });
      }
    },
    sendAveragePower(averagePower) {
      const self = this;
      uni.request({
        url: '/project/modify',
        method: 'POST',
        data: {
          id: self.projectInfo.id,
          power0: averagePower, // 发送计算的平均功率
        },
        success(result) {
          if (result.data.success) {
            uni.showToast({
              icon: 'success',
              title: '原灯功率已更新'
            });
          }
        }
      });
    },
    doSubmit() {
      const self = this;
      uni.request({
        url: '/project/modify',
        method: 'POST',
        data: {
          id: self.projectInfo.id,
          gateway_id: self.gatewayNumber,
          name: self.projectName,
          address: self.projectAddress,
          _node_count: self.lampCount,
          price: self.price,
          power: self.power,
          power0: self.averagePower, // 使用计算的平均功率
          warning_hours: self.reportInterval
        },
        success(result) {
          if (result.data.success) {
            uni.showToast({
              icon: 'success',
              title: '保存成功'
            });
            self.goBack();
          }
        }
      });
    },
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss" scoped>
	$border-color: #e0e0e0; // 或者你需要的任何颜色
.power-calculation {
  display: flex;
  flex-direction: column;
  height: 50vh;
  background-color: $white; // 表单背景改成白色
  border-radius: 10rpx; // 添加圆角
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    .title {
      display: flex;
      align-items: center;
	  margin-left: 20rpx;
      .line {
        width: 6rpx;
        height: 30rpx;
        background-color: $primary; // 使用你的主色调变量
        margin-right: 20rpx; // 与文本的间距
      }
      .text {
        font-size: $font-size-4;
        font-weight: normal;
      }
    }
    .add-btn {
      background-color: $primary;
      color: $white;
      text-align: center;
      padding: 10rpx 20rpx;
      font-size: $font-size-3;
      border-radius: 10rpx;
      cursor: pointer;
    }
  }
  .form-items {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 100rpx; // 确保底部有足够的空间放置按钮
    background-color: $white; // 表单背景改成白色
    margin: 0 30rpx; // 将表单往中间靠
    border-radius: 20rpx; // 添加圆角
  }
  .form-item {
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    background-color: $white; // 表单背景改成白色
    padding: 10rpx; // 增加内边距
    border: 1rpx solid $border-color; // 添加边框
    border-radius: 20rpx; // 添加圆角
    .item-label {
      width: 200rpx;
      font-size: $font-size-3;
    }
    .item-content {
      flex: 1;
      input {
        width: 100%;
        padding: 10rpx;
        font-size: $font-size-2;
      }
    }
    .remove-btn {
      background-color: #ff4d4f;
      color: $white;
      text-align: center;
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      font-size: $font-size-3;
      border-radius: 50%;
      margin-left: 10rpx;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .submit-btn {
    background-color: $primary;
    color: $white;
    text-align: center;
    line-height: 100rpx; // 确保文本垂直居中
    font-size: $font-size-3;
    border-radius: 10rpx;
    cursor: pointer;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx; // 设置明确的高度
    z-index: 10;
    box-sizing: border-box;
  }
  .result {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    .item-label {
      width: 200rpx;
      font-size: $font-size-3;
    }
    .item-content {
      flex: 1;
      font-size: $font-size-2;
    }
  }
}
</style>
